<template>
  <div class="plan-header">
    <h3 class="title">{{title}}</h3>
    <div class="week2class" v-if="classBtnShow">
      <el-button @click="toClassPlan(item)" v-for="(item,index) in week2class" :key="index" size="mini" type="primary" :plain="item!=currentClassDate">{{dict_weekName[index+1]}}</el-button>
    </div>
    <div class="plan-body">
      <el-row type="flex">
        <el-col :span="9"></el-col>
        <el-col :span="10">
          <el-form ref="planForm" :model="planForm" label-width="80px">
            <el-form-item label="标题">
              <el-input v-model="planForm.name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="日期范围">
               <el-date-picker v-model="doubleDate" readonly type="daterange" align="right" unlink-panels style="width: 100%;"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
               </el-date-picker>
            </el-form-item> -->
            <el-form-item v-show="!management" label="运动项目">
              <el-select v-model="planForm.sportId" @change="sportChange" filterable clearable placeholder="请选择" style="width: 100%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sport" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="!management" label="运动小项">
              <el-select v-model="planForm.sportItemId" filterable clearable placeholder="请选择" style="width: 100%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sportItem" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文档类型">
              <el-select v-model="planForm.docClassItemTypeId" filterable clearable placeholder="请选择" style="width: 100%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_docClassItemType" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上传者">
              <el-select v-model="planForm.empId" filterable clearable placeholder="请选择" style="width: 100%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_emp" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="!management?'撰写署名':'发布部门'">
              <el-select v-model="planForm.docDataEmpId" multiple filterable clearable placeholder="请选择" style="width: 100%;">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_docDataEmp" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="撰写日期">
              <div style="display: flex;justify-content: space-between;">
                <el-date-picker
                  v-model="planForm.createDate"
                  align="left"
                  type="date"
                  :clearable="false"
                  placeholder="选择日期" style="width: 100%;">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="9"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {meta_sport_item,probeClassPlan} from "@/api/plan.js"
  export default {
    props: {
      tableData: {
        type: Object,
        default: {}
      },
      openDate: {
        type: String,
        default: ''
      },
      classBtnShow: {
        type: Boolean,
        default: false,
      },
      management: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        doubleDate: [],
        planForm: {
          name: '',
          createDate: new Date(),
          sportId: '',
          sportItemId: '',
          empId: '',
          docClassItemTypeId: '',
          docDataEmpId: [],
        },
        title: '',
        tableHeader: [],
        dict_sport: {},
        dict_sportItem: {},
        dict_emp: {},
        dict_docDataEmp: {},
        dict_docClassItemType: {},
        docClassId: '',
        week2class: [],
        dict_weekName: {
          1:'一',
          2:'二',
          3:'三',
          4:'四',
          5:'五',
          6:'六',
          7:'日'
        },
        currentClassDate: '',
      }
    },
    watch: {
      tableData(newValue, oldValue) {
        this.init_tableHeader(newValue)
      }
    },
    methods: {
      toClassPlan(item) {
        if(item==this.currentClassDate){
          return
        }
        let data = {
          parentId: this.tableData.parentId,
          openDate: item + ' 00:00:00'
        }
        probeClassPlan(data).then(res=>{
          if(res.code === 200 ) {
            if(res.data.length == 0){
              const { href } = this.$router.resolve({
                  path: '/classPlanCreateAndPreview',
                  query: {parentId:this.tableData.parentId,openDate:item}
              });
              window.open(href, '_blank');
            }else{
              const { href } = this.$router.resolve({
                  path: '/classPlanCreateAndPreview',
                  query: {docDataId:res.data[0].docDataId,parentId:res.data[0].parentId}
              });
              window.open(href, '_blank');
            }
          }else{
            this.$message.error(res.message)
          }
        })
      },
      getFirstLastDay (time) {
 　　　　let date = new Date(time)
        let Time = date.getTime()
        let day = date.getDay()
        let oneDayTime = 24*60*60*1000
        let arr = []
        if(day == 0){
          day = 7
        }
        for (var i = 1; i <= 7; i++) {
          arr.push(this.$moment(Time + (i - day) * oneDayTime).format('YYYY-MM-DD'))
        }
　　　　　return arr
      },
      init_tableHeader(newValue) {
        let tableHeader = newValue.tableHeader
        if(newValue.planTypeId == 33 || newValue.planTypeId == 34) {
          let date = []
          if(this.openDate){
            date = this.openDate.split('至')
          }else{
            date = tableHeader[1].content.split(',')
          }
          this.doubleDate = [date[0],date[1]]
          this.week2class = this.getFirstLastDay(date[0])
          if(newValue.planTypeId == 34){
            this.docClassId = newValue.planTypeId
            this.doubleDate = [date[0],date[0]]
            this.currentClassDate = date[0]
          }
        }else{
          this.doubleDate = [tableHeader[1].openDate,tableHeader[1].openDate]
        }

        this.title = newValue.title.name
        // 处理标题
        this.planForm.name = tableHeader[0].content

        // 处理撰写日期
        if (tableHeader[7].defaultCreateDate == undefined) {
        	this.planForm.createDate = this.$moment(new Date()).format("YYYY-MM-DD")
        } else {
        	this.planForm.createDate = tableHeader[7].defaultCreateDate
        }

        // 处理运动项目
        this.dict_sport = tableHeader[2].content
        let defaultOption4sport = tableHeader[2].defaultOption
        if (defaultOption4sport == '' || defaultOption4sport == undefined) {
        	this.planForm.sportId = Object.keys(this.dict_sport)[0]
        } else {
        	this.planForm.sportId = defaultOption4sport+''
        }
        // 处理运动小项
        this.dict_sportItem = tableHeader[3].content
        let defaultOption4sportItem = tableHeader[3].defaultOption
        if (defaultOption4sportItem == '' || defaultOption4sportItem == undefined) {
        	this.planForm.sportItemId = Object.keys(this.dict_sportItem)[0]
        } else {
        	this.planForm.sportItemId = defaultOption4sportItem
        }
        // 处理文档类型
        this.dict_docClassItemType = tableHeader[4].content
        let defaultOption4docClassItemType = tableHeader[4].description
        if (defaultOption4docClassItemType == '' || defaultOption4docClassItemType == undefined) {
        	this.planForm.docClassItemTypeId = Object.keys(this.dict_docClassItemType)[0]
        } else {
        	this.planForm.docClassItemTypeId = defaultOption4docClassItemType
        }
        // 处理上传者
        this.dict_emp = tableHeader[5].content
        let defaultOption4emp = tableHeader[5].description
        if (defaultOption4emp == '' || defaultOption4emp == undefined) {
          this.planForm.empId = Object.keys(this.dict_emp)[0]
        } else {
          this.planForm.empId = defaultOption4emp+''
        }

        // 处理发布部门
        this.dict_docDataEmp = tableHeader[6].content
        let defaultOption4docDataEmp = tableHeader[6].defaultSigners
        if (defaultOption4docDataEmp == '' || defaultOption4docDataEmp == undefined) {
        	this.planForm.docDataEmpId = [Object.keys(this.dict_docDataEmp)[0]]
        } else {
        	this.planForm.docDataEmpId = defaultOption4docDataEmp.split(',')
          this.planForm.docDataEmpId.forEach((item,index)=>{
            if(!this.dict_docDataEmp[item]) {
              this.planForm.docDataEmpId.splice(index,1)
            }
          })
        }
        this.$store.commit('user/SET_PLANFORM',this.planForm)
        this.$store.commit('user/SET_PLANDATE',this.doubleDate)
      },
      sportChange(val) {
        this.planForm.sportItemId = ''
        meta_sport_item(val).then(res=>{
          if(res.code === 200 && res.data.length != 0){
            let dict = {}
            res.data.forEach(item=>{
              dict[item.sportItemId] = item.name
            })
            this.dict_sportItem = dict
          }else{
            this.dict_sportItem = {}
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .plan-header{

    .title{
      text-align: center;
    }
    .week2class{
      text-align: center;
      background-color: #f6f6f6;
      padding: 10px 0;
    }
    .plan-body{
      background-color: #FFFFFF;
      padding: 20px 20px;
    }
  }
</style>
